<template>
  <div>
    <!-- <grid-layout
      v-if="false"
      v-model:layout="layout"
      :row-height="rowHeight"
      :margin="[7, 7]"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :responsive="true"
      :responsive-layouts="layouts"
      :breakpoints="breakpoints"
      :cols="cols"
    >
      <grid-item
        v-for="item in layout"
        :static="item.static"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
    <first-screen
      v-if="false"
      @on-complete="onComplete"
      v-show="firstScreenShow"
    ></first-screen>
  <ScrollM></ScrollM> -->
    <!-- <StaggerAni></StaggerAni> -->
  </div>
  <!-- <img src="@/assets/logo/m.svg" alt="" /> -->
  <!-- <div class="logo">Time Room°</div> -->

  <!-- <ScrollM></ScrollM> -->
  <HoverAutoGrid></HoverAutoGrid>

  <div class="flashlight" @mousemove="onMouseMove">
    <div class="masking__primary">
      <img src="@/assets/images/footer-logo.svg" alt="" />
    </div>
    <div class="masking__secondary">
      <img src="@/assets/images/footer-logo.svg" alt="" />
    </div>
  </div>
  <div class="copyright">
    <div class="copyright__left">
      <p>©2025 TimeRoom<sup>®</sup></p>
    </div>
  </div>
  <div class="footer">
    <div class="contact">
      <div class="line"></div>
      <div class="container">
        <div class="con-item">
          <span>Email</span>
          <h4 class="overflow-visible">
            <a href="mailto:violenceHK@outlook.com">violenceHK@outlook.com</a>
          </h4>
        </div>
        <div class="con-item">
          <span>Call</span>
          <h4 class="overflow-visible">
            <a href="tel:+8615524516399">+86 15524516399</a>
          </h4>
        </div>
      </div>
      <div class="line"></div>
    </div>
  </div>
</template>
<script setup>
import { gsap } from "gsap-trial";
import FirstScreen from "./FirstScreen.vue";
import { GridLayout, GridItem } from "vue3-grid-layout-next";
import { onMounted, ref } from "vue";
import StaggerAni from "./staggerAni.vue";
import ScrollM from "./scrollM.vue";
import HoverAutoGrid from "./HoverAutoGrid.vue";

const breakpoints = ref({
  lg: 1920,
  md: 1440,
  sm: 1024,
});
const cols = ref({
  lg: 28,
  md: 22,
  sm: 20,
});
const rowHeights = ref({
  lg: 91.5,
  md: 87,
  sm: 72,
});
let rowHeight = ref(0);

const getwinSize = () => {
  let size = "";
  if (window.innerWidth > 1920) {
    size = "lg";
  } else if (window.innerWidth > 1440) {
    size = "md";
  } else if (window.innerWidth > 1024) {
    size = "sm";
  }
  return { size };
};
let { size } = getwinSize();
rowHeight.value = rowHeights.value[size];

const layouts = ref({});
const layout_md = ref([]);
const layout_lg = ref([]);
const layout_sm = ref([]);

const getPresets = (target, rn, cn) => {
  let { size } = getwinSize();
  let data = [];
  for (let row = 0; row < rn; row++) {
    for (let col = 0; col < cn; col++) {
      const item = {
        x: col,
        y: row,
        w: 1,
        h: 1,
        i: `${size}-${row}-${col}`,
        static: false,
      };
      data.push(item);
    }
  }
  target.value = data;
};
getPresets(layout_lg, 5, 2);
getPresets(layout_md, 3, 2);
getPresets(layout_sm, 1, 2);

layouts.value.md = layout_md.value;
layouts.value.lg = layout_lg.value;
layouts.value.sm = layout_sm.value;

const layout = ref(JSON.parse(JSON.stringify(layout_lg.value)));

const init = () => {
  console.log(
    "%c [ layout ]-133",
    "font-size:13px; background:pink; color:#bf2c9f;",
    layout
  );
};

const firstScreenShow = ref(true);
const onComplete = () => {
  firstScreenShow.value = false;
  console.log("on--Timeline completed");
};

const onMouseMove = (event) => {
  const x = event.clientX;
  const y = event.clientY;
  gsap.set(".masking__secondary", {
    "--x": `${x}px`,
    "--y": `${y}px`,
  });
};
onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;500;600;700;800&display=swap");
@font-face {
  font-family: "Dirtyline 36Daysoftype 2022";
  src: url("@/assets/fonts/Dirtyline36Daysoftype2022-Reg.woff2");
  // src: url("@/assets/fonts/aFTU7PB1QTsUX8KYthqQBA.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.vue-grid-layout {
  background: rgb(238, 238, 238);
  box-sizing: border-box;
}

.vue-grid-item {
  box-sizing: border-box;
  border: 0px solid rgba(123, 123, 123, 0.498039);
  border-radius: 4px;
  color: rgb(153, 153, 153);
  font-weight: 400;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  /* background: #fff; */
  /* border: 1px solid black; */
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  /* background: #fff; */
}

.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

.logo {
  text-align: center;
  font-family: "Dirtyline 36Daysoftype 2022";
  font-size: 3.125rem;
  line-height: 6.25rem;
  letter-spacing: -2px;
}
.footer {
  // display: none;
  background-color: #000;
  padding: 1rem;
  .line {
    position: relative;
    height: 1px;
    width: 100%;
    background-color: #e0eeee;
    &:before {
      content: "";
      position: absolute;
      top: 50%;
      right: -1px;
      height: 0.625rem;
      width: 0.625rem;
      background: url(@/assets/images/line-arrow.svg) 100% no-repeat;
      background-size: auto 75%;
      transform: translateY(-50%);
    }
  }
  .container {
    display: flex;
    gap: 2rem;
    text-align: left;
    color: #e0eeee;
    margin: 2rem 0;
    font-family: Syne, sans-serif;
    font-feature-settings: normal;
    font-variant-numeric: lining-nums;
    a {
      display: inline-block;
      font-size: 33.225px;
      text-decoration: none #e0eeee;
      color: inherit;
    }
  }
}
.flashlight {
  // display: none;
  position: relative;
  height: 300px;
  width: 100%;
  background-color: #000;
  cursor: url(@/assets/images/torch.png), auto;
  .masking__primary {
    opacity: 0.2;
  }
  .masking__secondary {
    --y: 0;
    --x: 0;
    --mask: radial-gradient(
      circle at var(--x) var(--y),
      #000 150px,
      transparent 300px
    );
    mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  img {
    min-width: 100%;
    will-change: auto;
    display: block;
  }
}
.copyright {
  // display: none;
  text-align: left;
  background-color: #000;
  padding: 20px 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(224, 238, 238, 0.9);
}
</style>
